<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>商品审核 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
    <title>商品管理 - 钢域云贸</title>

<body class="bg-gray-100">
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>

<!-- Main Content -->
<main class="container mx-auto my-8">
    <!-- Search and Filter -->
    <form th:action="@{/manager/product}" method="get" class="flex flex-wrap gap-4 items-center mb-6">

        <!-- 搜索框 -->
        <div class="relative">
            <input type="text" name="search" th:value="${search}" placeholder="搜索商品…"
                   class="pl-3 pr-9 py-2 rounded-full text-sm text-gray-800 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300 w-64 transition" />
            <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-blue-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M21 21l-5-5m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </button>
        </div>

        <!-- 分类下拉 -->
        <select name="categoryId" class="border border-gray-300 rounded-lg px-3 py-2 w-44 focus:outline-none focus:ring-2 focus:ring-blue-300">
            <option value="">分类</option>
            <option th:each="category : ${categories}"
                    th:value="${category.id}"
                    th:text="${category.name}"
                    th:selected="${category.id == categoryId}">
            </option>
        </select>

        <!-- 状态下拉 -->
        <select name="status" class="border border-gray-300 rounded-lg px-3 py-2 w-36 focus:outline-none focus:ring-2 focus:ring-blue-300">
            <option value="">状态</option>
            <option value="1" th:selected="${status == 1}">上架</option>
            <option value="0" th:selected="${status == 0}">下架</option>
        </select>

        <!-- 筛选按钮 -->
        <button type="submit"
                class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
            <i class="fas fa-filter mr-2"></i> 筛选
        </button>

        <!-- 重置按钮 -->
        <a th:href="@{/manager/product}"
           class="flex items-center px-4 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition">
            <i class="fas fa-redo mr-2"></i> 重置
        </a>
    </form>


    <!-- Product Table -->
    <div class="bg-white p-6 rounded shadow">
        <table class="w-full table-auto">
            <thead>
            <tr class="border-b bg-gray-200">
                <th class="p-2 text-left">商品名称</th>
                <th class="p-2 text-left">分类</th>
                <th class="p-2 text-left">价格</th>
                <th class="p-2 text-left">库存</th>
                <th class="p-2 text-left">状态</th>
                <th class="p-2 text-left">供应商</th>
                <th class="p-2 text-left">发货地区</th>
                <th class="p-2 text-left">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="product : ${products}" class="table-row border-b">
                <td class="p-2" th:text="${product.name}"></td>
                <td class="p-2" th:text="${product.categoryName}"></td>
                <td class="p-2" th:text="'¥' + ${#numbers.formatDecimal(product.price, 1, 2)}"></td>
                <td class="p-2" th:text="${product.inventory}"></td>
                <td class="p-2" th:text="${product.status == 1} ? '上架' : '下架'"></td>
                <td class="p-2" th:text="${product.supplierName}"></td>
                <td class="p-2" th:text="${product.shippingRegion}"></td>
                <td class="p-2">
                    <a th:if="${product.status == 0}" th:href="@{/manager/product/audit(id=${product.id})}" class="action-btn text-blue-600 hover:text-blue-800 mr-2">审核</a>
                    <form th:if="${product.status == 1}" th:action="@{/manager/product/off-shelf(id=${product.id})}" method="post" style="display:inline;">
                        <input type="hidden" name="_method" value="POST">
                        <button type="submit" class="action-btn text-red-600 hover:text-red-800" onclick="return showOffShelfModal(this)">下架</button>
                    </form>
                </td>
            </tr>
            <tr th:if="${#lists.isEmpty(products)}">
                <td colspan="8" class="p-2 text-center text-gray-500">暂无商品</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="flex flex-col items-center mt-6 space-y-3">
        <!-- 商品总数 -->
        <div class="text-gray-700">
            <span>共 <span th:text="${totalItems}"></span> 件商品</span>
        </div>
        <!-- 分页控件 -->
        <div class="flex justify-center space-x-2">
            <a th:href="@{/manager/product(page=${currentPage - 1}, search=${search}, categoryId=${categoryId}, status=${status})}"
               th:classappend="${currentPage == 1} ? 'bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700'"
               th:attr="disabled=${currentPage == 1} ? 'disabled' : null">上一页</a>
            <!-- 页码跳转 -->
            <div class="flex space-x-1">
                <a th:each="i : ${#numbers.sequence(1, totalPages)}"
                   th:href="@{/manager/product(page=${i}, search=${search}, categoryId=${categoryId}, status=${status})}"
                   th:classappend="${i == currentPage} ? 'bg-blue-600 text-white px-3 py-1 rounded' : 'bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-blue-200'"
                   th:text="${i}"></a>
            </div>
<!--            <span class="px-4 py-2" th:text="'第 ' + ${currentPage} + ' 页 / 共 ' + ${totalPages} + ' 页'"></span>-->
            <a th:href="@{/manager/product(page=${currentPage + 1}, search=${search}, categoryId=${categoryId}, status=${status})}"
               th:classappend="${currentPage == totalPages} ? 'bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700'"
               th:attr="disabled=${currentPage == totalPages} ? 'disabled' : null">下一页</a>
        </div>
    </div>
    <!-- Off-Shelf Modal -->
    <div id="offShelfModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center">
        <div class="bg-white p-6 rounded shadow-lg w-1/3">
            <h2 class="text-xl font-bold mb-4">下架商品</h2>
            <form id="offShelfForm" th:action="@{/manager/product/off-shelf}" method="post">
                <input type="hidden" name="id" id="productId">
                <div class="mb-4">
                    <label class="block text-gray-700">下架原因</label>
                    <textarea name="reason" class="w-full border p-2 rounded" rows="4" required></textarea>
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeOffShelfModal()" class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700">取消</button>
                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">提交</button>
                </div>
            </form>
        </div>
    </div>
</main>
<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>
<script>
    function showOffShelfModal(button) {
        const form = button.closest('form');
        const productId = form.action.match(/id=(\d+)/)[1];
        const modal = document.getElementById('offShelfModal');
        const modalForm = document.getElementById('offShelfForm');
        modalForm.querySelector('input[name="id"]').value = productId;
        modal.classList.remove('hidden');
        return false;
    }

    function closeOffShelfModal() {
        document.getElementById('offShelfModal').classList.add('hidden');
    }
</script>
</body>
</html>